<!-- 客服 -->
<template>
    <div class="customerService">
        <van-nav-bar title="在线客服" left-arrow :border="false" @click-left="onClickLeft"/>
        <div class="online" @click="goLink('在线客服')">
            <img src="@/assets/customerService/onlineImg.png" alt="">
        </div>
        <div class="nav flex">
            <div class="flex allFlex flexColumn alignCenter justifyCenter">
                <img src="@/assets/customerService/phoneIcon.png" alt="">
                <span>电话客服</span>
            </div>
            <div class="flex allFlex flexColumn alignCenter justifyCenter">
                <img src="@/assets/customerService/wechatIcon.png" alt="">
                <span>微信客服</span>
            </div>
            <div class="flex allFlex flexColumn alignCenter justifyCenter">
                <img src="@/assets/customerService/phoneIcon.png" alt="">
                <span>电话客服</span>
            </div>
            <div class="flex allFlex flexColumn alignCenter justifyCenter">
                <img src="@/assets/customerService/phoneIcon.png" alt="">
                <span>电话客服</span>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive , getCurrentInstance } from 'vue';
import { NavBar } from 'vant';
import { getLinks } from '@/utils';
export default {
    components: {
        [NavBar.name]: NavBar,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 返回上一页
        const onClickLeft = () => history.back();

        // 跳转链接
        const goLink = async (title) => {
            try {
                var list = await getLinks(title);
                if(list.length > 0){
                    window.location.href = list[0].jumpUrl
                }else{
                    proxy.$toast({message: '暂未获取到配置信息，请联系客服！',position: 'bottom'})
                }
            } catch (error) {
                proxy.$toast({message: error, position: 'bottom'})
            }
            
        }
        
        return {
            onClickLeft,
            goLink,
        }
    }
}

</script>
<style scoped>
.customerService{
    min-height: 100vh;
    background: url('../../assets/lifePayCost/electricityChargeHeadNanBg.png') no-repeat;
    background-size: 100%;
}
.customerService /deep/ .van-nav-bar{
    background: none;
}
.customerService /deep/ .van-icon{
    color: #FFFFFF;
}
.customerService /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}
.customerService /deep/ .van-nav-bar__text{
    color: #FFFFFF;
}
/* 在线客服 */
.online{
    margin: 10px 12px;
    height: 118px;
}
.online img{
    width: 100%;
    height: 100%;
    display: inline-block;
}
/* 导航栏 */
.nav{
    height: 100px;
    margin: 0 12px 10px;
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 12px;
    color: #888888;
    font-weight: 500;
}
.nav img{
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}
</style>